@import "../variables";

.order-info {
  .order-steps {
    .el-step__title {
      font-size: 12px;
    }
  }

  .order-title {
    color: #666;
    line-height: 42px;
  }

  .order-detail {
    border: 1px solid #f0f0f0;

    .detail-item {
      &-title {
        line-height: 42px;
      }

      &-content {
        line-height: 32px;

        .consignee-box {
          .c-scroll {
            overflow: hidden;

            .c-content {
              zoom: 1;
              height: 42px;
              overflow: hidden;
              margin: 0 10px 0 20px;

              .c-list {
                margin: 0;
                padding: 0;
                position: relative;

                li {
                  list-style: none;
                  height: 30px;
                  margin: 6px 0;
                  width: 99.8%;
                  display: list-item;

                  .c-item {
                    border: 2px solid #ddd;
                    padding: 4px 10px;
                    float: left;
                    list-style: none;
                    position: relative;
                    height: 18px;
                    line-height: 18px;
                    width: 120px;
                    text-align: center;
                    cursor: pointer;
                    background-color: #fff;
                  }

                  .item-selected,
                  .item-hover {
                    border: 2px solid #e4393c;

                    b {
                      display: block;
                      position: absolute;
                      right: 0;
                      bottom: 0;
                      width: 12px;
                      height: 12px;
                      overflow: hidden;
                      background: url(/images/order/selected-icon.png) no-repeat;
                    }
                  }

                  .addr-detail {
                    float: left;
                    height: 30px;
                    line-height: 30px;

                    .addr-name,
                    .addr-info,
                    .addr-tel,
                    .addr-default {
                      display: inline-block;
                      margin-left: 10px;
                    }

                    .addr-default {
                      margin: 5px 10px;
                      background-color: #999;
                      color: #fff;
                      padding: 0 3px;
                      line-height: 20px;
                    }
                  }

                  .op-btns {
                    visibility: hidden;
                    float: right;
                    text-align: right;
                    height: 30px;
                    line-height: 30px;

                    .el-link {
                      margin-right: 8px;
                    }
                  }
                }

                .c-li-hover {
                  background-color: #ddd;

                  .op-btns {
                    visibility: visible !important;
                  }
                }
              }
            }
          }

          .expand-more {
            overflow: auto !important;

            .c-content {
              height: auto !important;

              .c-list {
                top: 0 !important;
              }
            }
          }

          .c-more {
            margin: 5px 10px 5px 20px;
          }
        }

        .sku-table {
          .s-title {
            text-decoration: none;
            color: #333;
          }

          .s-title:hover {
            color: red;
          }
        }

        .coupon-box {
          .coupon-item {
            height: 125px;
            width: 201px;

            .c-detail {
              .c-msg {
                height: 70px;
                width: 100%;
                border-left: 1px solid #e8e8e8;
                border-right: 1px solid #e8e8e8;
                background-color: #74d2d4;

                .c-top {
                  height: 3px;
                  width: 100%;
                  background: #fff url(/images/order/virtual.png) -36px -6px no-repeat;
                }

                .c-price {
                  color: #fff;
                  font: 18px Arial, Verdana, "Microsoft YaHei", SimSun;
                  height: 19px;
                  margin-left: 12px;
                  margin-right: 5px;
                  display: inline-block;
                  position: relative;
                  top: 8px;

                  em {
                    font-style: normal;
                    font-size: 24px;
                  }
                }

                .c-limit {
                  color: #f5f5f5;
                  font-size: 12px;
                  display: inline;
                  position: relative;
                  top: 7px;
                }

                .c-expiration {
                  padding-left: 12px;
                  color: #cef0f1;
                }
              }

              .c-type {
                height: 25px;
                line-height: 25px;
                width: 100%;
                color: #d1d1d1;
                border: 1px solid #e8e8e8;

                span {
                  margin: 0 5px 0 12px;
                }
              }

              .c-info {
                height: 40px;
                width: 210px;
                color: #333;
              }
            }

            .c-disable {
              .c-msg {
                cursor: not-allowed;
                border-left: 1px solid #d1d1d1;
                border-right: 1px solid #d1d1d1;
                background-color: #d1d1d1;

                .c-top {
                  height: 3px;
                  width: 100%;
                  background: #fff url(/images/order/virtual.png) -36px -3px no-repeat;
                }

                .c-expiration {
                  color: #b0afaf;
                }
              }
            }

            .c-active {
              border: 2px solid #e43a3d;
              background-image: url(/images/order/selected.png);
              background-repeat: no-repeat;
              background-position: bottom right;

              .c-msg {
                cursor: pointer;
                height: 66px;
                width: 100%;
                border-left: 0;
                border-right: 0;

                .c-top {
                  height: 0px;
                }
              }
            }
          }
        }

        .coupon-schema {
          width: 100%;
          background-color: #f6f6f6;
          display: block;
          margin-top: 15px;
          padding: 5px;
          font-size: 12px;

          em {
            color: #e73739;
            margin-left: 5px;
            font-family: verdana;
            font-style: normal;
          }

          span {
            color: #666;
            margin-left: 5px;
          }
        }
      }
    }
  }

  .order-line {
    height: 1px;
    border-bottom: 1px solid #f0f0f0;
  }
}
